<template>
  <div class="warpper">
    <div class="daohan">
      <dao-han :daohan_index="1"></dao-han>
    </div>
    <div class="common-layout">
      <div class="main">
        <div class="lunbo">
          <el-carousel :interval="3000"
                       type="card"
                       height="300px">
            <el-carousel-item v-for="item in lunbo"
                              :key="item">
              <img :src="item.lunbo"
                   alt="">
            </el-carousel-item>
          </el-carousel>
        </div>

        <div class="lists">
          <!-- 领养列表 -->
          <shou-list :title="'宠物领养'"
                     :path="'/shouye/liebiao'"></shou-list>
          <!-- 寄养展示 -->
          <he-lp></he-lp>
          <!-- 每天一个小知识 -->
          <xiao-zhishi></xiao-zhishi>
        </div>

      </div>

    </div>

  </div>

</template>

<script>
import { ref, onMounted, getCurrentInstance } from 'vue'
import DaoHan from '@/components/daohan/DaoHan.vue'
import ShouList from '@/components/liebiao/ShouList.vue'
import HeLp from '@/components/liebiao/HeLp.vue'
import XiaoZhishi from '@/components/liebiao/XiaoZhishi.vue'
// const emitter = mitt()
export default {
  components: {
    ShouList,
    HeLp,
    XiaoZhishi,
    DaoHan
  },
  setup() {
    const lunbo = ref('')
    const { proxy } = getCurrentInstance()
    let data = ref('宠物领养')
    onMounted(() => {
      //获取轮播图
      proxy.$axios
        .get('/shouye')
        .then((d) => {
          // console.log(d)
          lunbo.value = d
        })
        .catch((err) => console.log(err))
    })
    return {
      lunbo,
      data
    }
  }
}
</script>

<style scoped lang="less">
/* 在这里添加样式 */
.warpper {
  width: 1200px;
  height: 100%;
  margin: 0 auto;
  // padding-top: 80px;
}
.daohan {
  width: 100vw;
  position: fixed;
  top: 0;
  z-index: 3;
}
.main {
  // width: 1000px;
  width: 100%;
  padding: 10px;
  margin: 0 auto;
  .lunbo {
    // background-color: #fff;
  }
  .lists {
    // height: 10000px;
    // background-color: #666;
    // display: flex;
    // flex-wrap: wrap;
  }
}

.el-carousel__item {
  img {
    width: 98%;
    height: 98%;
    border-radius: 10px;
  }
}
</style>